<template>
	<view class="content unify-relative">
		<swiper class="swiper" :style="{'height': height, 'border-radius': radius}" :indicator-dots="false"
			:indicator-color="'rgba(0, 0, 0, .2)'" :indicator-active-color="'#FF7639'" :autoplay="true" :interval="3000"
			:duration="1000" :circular="true" @change="changeSwiper">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<image class="image" :style="{'height': height}" :src="item.image || errorImage" mode=""></image>
			</swiper-item>
		</swiper>
		
		<!-- 指示灯数量 -->
		<view class="carousel-num" v-if="!isIndicatorLight">
			{{currentSwiper + 1}} / {{list.length}}
		</view>
		
		<!-- 指示灯 -->
		<view class="dots" :style="{'bottom': bottom}" v-if="isIndicatorLight">
			<view class="dot" :style="{'background-color': index === currentSwiper? backgroundColor: ''}"
				:class="{'active-z': (index == currentSwiper)}" v-for="(item, index) in list" :key="index"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			height: {
				type: String,
				default: ''
			},
			radius: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: []
			},
			bottom: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: ''
			},
			isIndicatorLight: {	// 指示灯是否显示  默认true
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				errorImage: this.$mAssetsPath.errorImage,	// 图片加载失败填充
				currentSwiper: 0,
			}
		},
		methods: {
			// 自定义指示灯
			changeSwiper(params) {
				this.currentSwiper = params.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		.swiper {
			overflow: hidden;
			
			.swiper-item {
				overflow: hidden;
			}

			.image {
				width: 100%;
			}
		}
		
		// 指示灯数量
		.carousel-num {
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 10rpx 30rpx;
			background-color: rgba($color: #000000, $alpha: .6);
			border-radius: 20rpx 0 0 0;
			color: #FFFFFF;
			font-size: 24rpx;
		}
		
		/*用来包裹所有的小圆点 */
		
		.dots {
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 9;
		}
		
		/*未选中时的小圆点样式 */
		
		.dot {
			width: 33rpx;
			height: 4rpx;
			border-radius: 3rpx;
			// margin-right: 26rpx;
			background-color: rgba($color: #FFFFFF, $alpha: 0.4);
		}
		
		/*选中以后的小圆点样式 */
		
		.active-z {
			width: 33rpx;
			height: 4rpx;
			border-radius: 3rpx;
		}
	}
</style>
